.student-navbar__links-container {
  position: relative;
  transition: all 0.2s ease-in-out;
}

.student-navbar__links-container:before,
.student-navbar__links-container:after {
  position: absolute;
  content: "";
  display: inline-block;
}

.student-navbar__links-container:before {
  top: -10px;
  right: 23px;
  border-right: 10px solid transparent;
  border-bottom: 10px solid theme("colors.gray.400");
  border-left: 10px solid transparent;
  border-bottom-color: theme("colors.gray.400");
}

[dir="rtl"] .student-navbar__links-container:before {
  right: auto;
  left: 23px;
}

.student-navbar__links-container:after {
  top: -9px;
  right: 24px;
  border-right: 9px solid transparent;
  border-bottom: 9px solid theme("colors.gray.100");
  border-left: 9px solid transparent;
}

[dir="rtl"] .student-navbar__links-container:after {
  right: auto;
  left: 24px;
}

@screen md {
  .student-navbar__links-container:before,
  .student-navbar__links-container:after {
    display: none;
  }
}

/* Toggle menu btn */

.student-navbar__menu-btn.open
  .student-navbar__menu-icon
  .student-navbar__menu-icon-bar {
  background: transparent;
}

.student-navbar__menu-btn.open
  .student-navbar__menu-icon
  .student-navbar__menu-icon-bar:before {
  transform: rotate(-45deg);
}

.student-navbar__menu-btn.open
  .student-navbar__menu-icon
  .student-navbar__menu-icon-bar:after {
  transform: rotate(45deg);
}

.student-navbar__menu-btn.open .student-navbar__menu-icon-bar:before,
.student-navbar__menu-btn.open .student-navbar__menu-icon-bar:after {
  top: 0;
}

/* Toggle menu icon */

.student-navbar__menu-icon {
  cursor: pointer;
  display: inline-block;
  position: relative;
  user-select: none;
}

.student-navbar__menu-icon .student-navbar__menu-icon-bar {
  background: #453c52;
  display: block;
  height: 2px;
  position: relative;
  transition: all 0.2s;
  width: 20px;
}

.student-navbar__menu-icon .student-navbar__menu-icon-bar:before,
.student-navbar__menu-icon .student-navbar__menu-icon-bar:after {
  background: #453c52;
  content: "";
  display: block;
  height: 100%;
  position: absolute;
  transition: all 0.2s;
  width: 100%;
}

.student-navbar__menu-icon .student-navbar__menu-icon-bar:before {
  top: 6px;
}

.student-navbar__menu-icon .student-navbar__menu-icon-bar:after {
  top: -6px;
}
.student-navbar__notifications-unread-bullet {
  @apply absolute block h-2.5 w-2.5 rounded-full border-2 border-white bg-red-500 -top-0.5;
  right: 4px;
}

.student-navbar__notifications-unread-bullet::before {
  content: "";
  @apply animate-ping absolute inline-flex h-full w-full inset-0 rounded-full bg-red-500 opacity-75;
}
